<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jill's</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: rgb(20, 20, 20);
            overflow: hidden;
        }

        .container {
            position: relative;
            width: 100%;
            height: calc(100% - 100px); /* 减去说明文字的高度 */
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url("image/Jill/f88ffbf8fcbfef5751d4af4eeea8c028.jpg");
            background-size: cover;
            background-position: center;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            transition: opacity 0.5s;
            z-index: 2;
        }

        .a {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 500px;
            height: 120px;
            border: solid 10px #fff;
            box-shadow: 0 0 70px rgb(190,40,210);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 3;
            opacity: 0.5; /* 设置为半透明 */
        }

        .a::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            box-shadow: 0 0 5px rgba(190,40,210);
            background-color: rgba(100,30,225,.4);
        }

        .a:hover {
            animation: a 1.5s;
        }

        @keyframes a {
            0%, 34%, 68%, 100% {
                border: solid 10px #fff;
                box-shadow: 0 0 70px rgb(190,40,210);
            }
            17%, 51%, 85% {
                border: solid 10px rgba(255,0,0,.5);
                box-shadow: 0 0 90px rgba(255,0,0,.8);
            }
        }

        .b, .b::before {
            z-index: 999;
            color: #fff;
            position: absolute;
            font-size: 20px;
            font-weight: 900;
            letter-spacing: 8px;
        }

        .b::before {
            content: 'EVERY DAY IS NIGHT';
            text-shadow: -5px -5px 0px rgb(211,250,9), 5px 5px 0px rgb(25,10,240);
            clip-path: inset(100% 0px 0px 0px);
        }

        .a:hover .b::before {
            animation: move 1.25s steps(2);
        }

        @keyframes move {
            0% {
                clip-path: inset(80% 0px 0px 0px);
                transform: translate(-20px, -10px);
            }
            10% {
                clip-path: inset(10% 0px 85% 0px);
                transform: translate(10px, 10px);
            }
            20% {
                clip-path: inset(80% 0px 0px 0px);
                transform: translate(-10px, 10px);
            }
            30% {
                clip-path: inset(10% 0px 85% 0px);
                transform: translate(0px, 5px);
            }
            40% {
                clip-path: inset(50% 0px 30% 0px);
                transform: translate(-5px, 0px);
            }
            50% {
                clip-path: inset(10% 0px 30% 0px);
                transform: translate(5px, 0px);
            }
            60% {
                clip-path: inset(40% 0px 30% 0px);
                transform: translate(5px, 10px);
            }
            70% {
                clip-path: inset(50% 0px 30% 0px);
                transform: translate(-10px, 10px);
            }
            80% {
                clip-path: inset(80% 0px 5% 0px);
                transform: translate(20px, -10px);
            }
            90% {
                clip-path: inset(80% 0px 0px 0px);
                transform: translate(-10px, 0px);
            }
            100% {
                clip-path: inset(80% 0px 0px 0px);
                transform: translate(0px, 0px);
            }
        }

        .description {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: #e8e8e8;
            font-size: 10px;
            font-weight: 200;
            letter-spacing: 2px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            z-index: 4;
        }

        .menu-button {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 50px;
            background: rgba(0, 0, 0, 0.8);
            border: none;
            border-radius: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 5;
            color: #b7b7b7;
            font-size: 18px;
            font-weight: 700;
            text-transform: uppercase;
        }

        .menu-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 5;
            justify-content: center;
            align-items: center;
        }

        .menu-modal-content {
            background: rgba(0, 0, 0, 0.8);
            padding: 20px;
            border: none;
            border-radius: 0;
            box-shadow: none;
            max-width: 80%;
            max-height: 80%;
            overflow-y: auto;
            color: #fff;
        }

        .menu-modal-content h2 {
            margin-top: 0;
            color: #fff;
        }

        .menu-modal-content ul {
            list-style-type: none;
            padding: 0;
            color: #fff;
        }

        .menu-modal-content ul li {
            margin: 5px 0;
            color: #fff;
        }

        .close-menu-modal {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #fff;
            font-size: 24px;
        }

        /* 自定义滚动条样式 */
        .menu-modal-content::-webkit-scrollbar {
            width: 6px;
        }

        .menu-modal-content::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.5);
        }

        .menu-modal-content::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.5);
            border-radius: 3px;
        }

        .menu-modal-content::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.7);
        }
    </style>
</head>
<body>
<div class="container">
    <div class="overlay"></div>
    <div class="a">
        <div class="b"><span>EVERY DAY IS NIGHT</span></div>
    </div>
</div>
<div class="description">
    <strong>调制饮料，改变人生</strong><br>
    非盈利轻挂机 赛博朋克风格酒吧 Valhalla狒狒分店营业中~<br><br>
    [拂晓海26区 公寓1号楼4号房间]
</div>
<div class="menu-button" onclick="toggleMenuModal()">MENU</div>
<div class="menu-modal" id="menuModal">
    <div class="menu-modal-content">
        <span class="close-menu-modal" onclick="toggleMenuModal()">&times;</span>
        <h2>酒单</h2>
        <h3>甜味</h3>
        <ul>
            <li>Suger Rush</li>
            <li>Piano Woman</li>
            <li>Brandtini</li>
            <li>伊修加德奶茶</li>
            <li>光之泛滥</li>
            <li>星陨峡谷</li>
        </ul>
        <h3>酸味</h3>
        <ul>
            <li>Piano Man</li>
            <li>Bad Touch</li>
            <li>Fluffy Dream</li>
            <li>Blue Fairy</li>
            <li>河狸之梦</li>
        </ul>
        <h3>辣味</h3>
        <ul>
            <li>Bleeding Jane</li>
            <li>Cobalt Velvet</li>
            <li>杰克·威尔斯</li>
        </ul>
        <h3>苦味</h3>
        <ul>
            <li>Sunshine Cloud</li>
            <li>Beer</li>
            <li>Gut Punch</li>
            <li>矮人·拳</li>
            <li>聚散有时</li>
        </ul>
    </div>
</div>
<script>
    const container = document.querySelector('.container');
    const overlay = document.querySelector('.overlay');
    container.addEventListener('mousemove', (e) => {
        const rect = container.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        const distance = Math.sqrt((x - centerX) ** 2 + (y - centerY) ** 2);
        const maxDistance = Math.sqrt(centerX ** 2 + centerY ** 2);
        const opacity = 0.1 + (distance / maxDistance) * 0.7;
        overlay.style.opacity = Math.max(0.1, Math.min(0.8, opacity));
    });

    function toggleMenuModal() {
        const menuModal = document.getElementById('menuModal');
        if (menuModal.style.display === 'none' || menuModal.style.display === '') {
            menuModal.style.display = 'flex';
        } else {
            menuModal.style.display = 'none';
        }
    }
</script>

<!-- 引入访客统计模块 -->
<script src="../visitor-tracker.js"></script>
<!-- Cloudflare Web Analytics -->
<script defer src='../lib/cloudflare/beacon.min.js' data-cf-beacon='{"token": "0e55e488041949479a3dace73ef940cd"}'>
</script>
<!-- End Cloudflare Web Analytics -->

</body>
</html>